<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>proxy</title>
  </head>
  <body>
    <script>
      const person = {
        firstName: "yan",
        lastName: "haijing",
      };

      // Object.defineProperty只能代理对象的一个属性
      // Object.defineProperty(person, "fullName", {
      //   get() {
      //     return this.firstName + " " + this.lastName;
      //   },
      //   set(val) {
      //     const [firstName, lastName] = val.split(" ");
      //     this.firstName = firstName;
      //     this.lastName = lastName;
      //   },
      // });

      // Proxy只能代理对象的所有自身属性
      // 返回一个代理后的对象
      // const proxyPerson = new Proxy(person, {
      //   get(target, key, receiver) {
      //     /*
      //       target 就是代理的对象（原对象） -> person
      //       key 就是访问的某个属性名
      //       receiver 就是代理后的对象
      //     */
      //     // console.log(target, key, receiver);
      //     if (key === "fullName") {
      //       return target.firstName + " " + target.lastName;
      //     }

      //     return target[key];
      //   },
      //   set(target, key, val, receiver) {
      //     /*
      //       target 就是代理的对象（原对象） -> person
      //       key 就是访问的某个属性名
      //       val 设置的属性值
      //       receiver 就是代理后的对象
      //     */
      //     if (key === "fullName") {
      //       const [firstName, lastName] = val.split(" ");
      //       target.firstName = firstName;
      //       target.lastName = lastName;
      //       return;
      //     }

      //     target[key] = val;
      //   },
      // });

      const proxyPerson = new Proxy(person, {
        get(target, key, receiver) {
          /*
            target 就是代理的对象（原对象） -> person
            key 就是访问的某个属性名
            receiver 就是代理后的对象
          */
          // console.log(target, key, receiver);
          if (key === "fullName") {
            return (
              Reflect.get(target, "firstName", receiver) +
              " " +
              Reflect.get(target, "lastName", receiver)
            );
          }

          return Reflect.get(target, key, receiver);
        },
        set(target, key, val, receiver) {
          /*
            target 就是代理的对象（原对象） -> person
            key 就是访问的某个属性名
            val 设置的属性值
            receiver 就是代理后的对象
          */
          if (key === "fullName") {
            const [firstName, lastName] = val.split(" ");
            Reflect.set(target, "firstName", firstName, receiver);
            Reflect.set(target, "lastName", lastName, receiver);
            return;
          }

          Reflect.set(target, key, val, receiver);
        },
      });

      console.log(proxyPerson.firstName);
      console.log(proxyPerson.lastName);
      console.log(proxyPerson.fullName);
      proxyPerson.fullName = "lao wang";
      console.log(proxyPerson);
      // proxyPerson.firstName = "lao";
      // console.log(proxyPerson.firstName);
    </script>
  </body>
</html>
